<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="500px">
      <el-form-item label="医院名称">
        <el-input v-model="hospital.hospitalName" style="width: 250px" />
      </el-form-item>
      <el-form-item label="登录用户名">
        <el-input v-model="hospital.username" style="width: 250px" />
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="hospital.password" style="width: 250px" />
      </el-form-item>
      <el-form-item label="所在省市区">
        <el-cascader
          v-model="selectedOptions"
          :options="options"
          size="large"
          style="width: 350px"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import hospitalApi from '@/api/hospital'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

export default {
  data() {
    return {
      BASE_API: process.env.BASE_API,
      // 初始化作者默认数据
      hospital: {
        hospitalName: '',
        username: '',
        password: '',
        province: '',
        city: '',
        county: ''
      },
      options: regionData,
      selectedOptions: [],
      saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交,
    }
  },
  // 页面渲染成功
  created() {
    if (this.$route.params.id) {
      this.fetchDataById(this.$route.params.id)
    }
  },
  methods: {
    handleChange(value) {
      this.hospital.province = CodeToText[this.selectedOptions[0]]
      this.hospital.city = CodeToText[this.selectedOptions[1]]
      this.hospital.county = CodeToText[this.selectedOptions[2]]
      console.log(value)
    },
    saveOrUpdate() {
      // 禁用保存按钮
      this.saveBtnDisabled = true
      if (!this.hospital.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    saveData() {
      if (this.hospital.hospitalName === '' ||
         this.hospital.username === '' ||
         this.hospital.password === '' ||
         this.hospital.province === '' ||
         this.hospital.county === '' ||
         this.hospital.city === '') {
        this.saveBtnDisabled = false
        this.$notify({
          title: '警告',
          dangerouslyUseHTMLString: true,
          type: 'warning',
          duration: 3000,
          message: '含有空项目禁止提交'
        })
      } else {
        // debugger
        hospitalApi.save(this.hospital).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/hospital' })
        })
      }
    },
    // 根据id查询记录
    fetchDataById(id) {
      hospitalApi.getById(id).then(response => {
        this.hospital = response.data.item
        this.selectedOptions[0] = TextToCode[this.hospital.province].code
        this.selectedOptions[1] = TextToCode[this.hospital.province][this.hospital.city].code
        this.selectedOptions[2] = TextToCode[this.hospital.province][this.hospital.city][this.hospital.county].code
      })
    },
    // 根据id更新记录
    updateData() {
      // hospital数据的获取
      hospitalApi.updateById(this.hospital).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push({ path: '/hospital' })
      })
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
